<template>
  <div class="v-menu" style="width: 180px">
    <el-scrollbar :vertical="true" class="scrollbar-wrapper">
     <el-menu
        :default-active="activeIndex"
        mode="vertical"
        :default-openeds = 'openeds'
        @select="handleSelect"
        v-bind="$attrs"
        v-on="$listeners">
      <template v-for="menu of content">
        <el-menu-item :head="true" v-if="!menu.children||!menu.children.length" :index="menu.index">
          <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}" :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}"   class = 'm-icon' v-if="!!menu.icon" :icon-class="menu.icon"/>
          <span :message="JSON.stringify(menu.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu)}" class="m-text " >{{ menu.title }}</span>
        </el-menu-item>
        <el-submenu :head="true" v-else :index="menu.index">
          <template slot="title">
            <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}" :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}"  class = 'm-icon' v-if="!!menu.icon" :icon-class="menu.icon"/>
            <span :message="JSON.stringify(menu.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu)}"  class="m-text">{{ menu.title }}</span>
          </template>
          <template v-for="menu1 of menu.children">
            <el-menu-item v-if="!menu1.children||!menu1.children.length" :index="menu1.index">
              <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}" :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}" class = 'item-icon' v-if="!!menu1.icon" :icon-class="menu1.icon"/>
              <span :message="JSON.stringify(menu1.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu1)}"  class="item-text">{{ menu1.title }}</span>
            </el-menu-item>
            <el-submenu v-else :index="menu1.index">
              <template slot="title">
                <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}" :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}" class = 'item-icon' v-if="!!menu1.icon" :icon-class="menu1.icon"/>
                <span :message="JSON.stringify(menu1.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu1)}"  class="item-text">{{ menu1.title }}</span>
              </template>
              <template v-for="menu2 of menu1.children">
                <el-menu-item v-if="!menu2.children||!menu2.children.length" :index="menu2.index">
                  <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}" :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}" class = 'item-icon' v-if="!!menu2.icon" :icon-class="menu2.icon"/>
                  <span :message="JSON.stringify(menu2.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu2)}"  class="item-text">{{ menu2.title }}</span>
                </el-menu-item>
                <el-submenu v-else :index="menu2.index">
                  <template slot="title">
                    <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}" :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}"  class = 'item-icon' v-if="!!menu2.icon" :icon-class="menu2.icon"/>
                    <span :message="JSON.stringify(menu2.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu2)}"  class="item-text">{{ menu2.title }}</span>
                  </template>
                  <template v-for="menu3 of menu2.children">
                    <el-menu-item v-if="!menu3.children||!menu3.children.length"
                                 :index="menu3.index">
                      <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}"  :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}" class = 'item-icon' v-if="!!menu3.icon" :icon-class="menu3.icon"/>
                      <span :message="JSON.stringify(menu3.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu3)}"  class="item-text">{{ menu3.title }}</span>
                    </el-menu-item>
                    <el-submenu v-else :index="menu3.index">
                      <template slot="title">
                        <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}"  :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}" class = 'item-icon' v-if="!!menu3.icon" :icon-class="menu3.icon"/>
                        <span :message="JSON.stringify(menu3.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu3)}"  class="item-text">{{ menu3.title }}</span>
                      </template>
                      <template v-for="menu4 of menu3.children">
                        <el-menu-item :index="menu4.index">
                          <svg-icon :style="{verticalAlign:$attrs.collapse?'-3.5px':''}" :icon-style="{fill:theme==='light'?'#3370FF':'#FFFFFF'}"  class = 'item-icon' v-if="!!menu4.icon" :icon-class="menu4.icon"/>
                          <span :message="JSON.stringify(menu4.showHelpInfo)" :class="{'menu-show-help':isShowHelpInfo(menu4)}"  class="item-text">{{ menu4.title }}</span>
                        </el-menu-item>
                      </template>
                    </el-submenu>
                  </template>
                </el-submenu>
              </template>
            </el-submenu>
          </template>
        </el-submenu>
      </template>
    </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>

export default {
  name: "vMenu",
  data() {
    return {
      activeIndex:'0',
      activeMenu:'',
      openeds:[],
      all:[],
    }
  },
  props: {
    content: {
      type: Array,
      default: _ => []
    }
  },
  watch:{
    activeMenu(){
      this.activeIndex = this.activeMenu.index
    },
  },
  computed:{
    theme(){
      return this.$store.getters.theme
    },
    isShowHelpInfo(){
      return menu => {
        return this.$store.getters.isShowingHelp && menu.hasOwnProperty('showHelpInfo')
      }
    }
  },
  methods:{
    handleSelect(index){
      const indexArray = index.split('-')
      const res = indexArray.reduce((previousValue, currentValue)=>{
        return previousValue.hasOwnProperty('children')?previousValue.children[currentValue]:previousValue[currentValue]
      },this.content)
      this.activeMenu = res
      this.$emit('doSelect',res)
    },
    doOpenAll(){
      this.openeds = [...this.all]
    },
    getFirst(content){
      const {children} = content
      if(!children||children.length==0){
        return Object.assign(content)
      }else{
        return this.getFirst(children[0])
      }
    },
    createIndex(content,preFix){
      if(content&&content.length>0){
        content.forEach((item,index)=>{
          item.index = preFix?`${preFix}-${index}`:`${index}`
          this.all.push(item.index)
          if(item.home){
            this.$emit('setFirstPage',item)
            this.activeMenu = item
          }
          this.createIndex(item.children,item.index)
        })
      }
    },
  },
  created() {
    this.createIndex(this.content)
  },
  mounted() {
    if(!this.activeMenu){
      const first = this.first = this.getFirst({children:this.content})
      this.activeMenu = first
    }
  },
}
</script>

<style lang="scss" scoped>
.item-icon{
  font-size:14px;
  margin-right: 15px
}
.item-text {
  font-size: 14px;
  vertical-align: 0.5px;
}
.m-icon{
  font-size:16px;
  margin-right: 15px
}
.m-text {
  font-size: 12px;
  vertical-align: 0.3px;
}

.v-menu {
  .el-submenu [class^=el-icon-] {
    vertical-align: middle;
    margin-right: 15px;
    width: 1em;
    text-align: center;
  }

  .el-menu-item [class^=el-icon-] {
    margin-right: 15px;
    width: 1em;
    text-align: center;
    vertical-align: middle;
  }
  .scrollbar-wrapper{
    margin-right: -5px;
  }
  // reset element-ui css
  .horizontal-collapse-transition {
    transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
  }
  .el-scrollbar__bar.is-vertical {
    right: 0px;
  }

  .el-scrollbar {
    overflow-x: hidden;
    height: 100%;
  }
}
</style>
